<template>
    <div class="entry">
        <!-- 左侧菜单栏 -->
        <template>
            <EntryLeftModule
                :fileDataSources="fileSourceCategoryData"
                :clauseSourceCode="clauseQueryParam.clauseSourceCode"
                :currentNodekey="'0'"
                type="操作记录"
                @emitHandleNodeClickRecord="emitHandleNodeClickRecord"
            >
                <template slot="title">
                    <HeaderTitle>
                        <div slot="title">{{ headerTitle }}</div>
                    </HeaderTitle>
                </template>
                <template slot="treeIcon">
                    <i class="el-icon-office-building" style="color: #3498ff !important"></i>
                </template>
            </EntryLeftModule>
        </template>
        <!-- 右侧内容框 -->
        <template>
            <div class="content silder-right">
                <!-- 合规条款 -->
                <div class="content-top">
                    <HeaderTitle>
                        <div slot="title">合规条款</div>
                    </HeaderTitle>
                    <div class="operate">
                        <div class="operate-btn">
                            <el-input
                                size="small"
                                v-model="clauseQueryParam.clauseText"
                                prefix-icon="el-icon-search"
                                placeholder="请输入条款原文"
                                style="width: 230px; margin-right: 10px"
                                @input="clauseTextLikeQuery"
                            />
                            <div>
                                <span style="color: black">更新类型：</span>
                                <el-select v-model="clauseQueryParam.modifyType" filterable clearable size="small" @change="getOpertionLog">
                                    <el-option key="1" value="1" label="新增条款"></el-option>
                                    <el-option key="2" value="2" label="修改条款"></el-option>
                                    <el-option key="3" value="3" label="删除条款"></el-option>
                                    <el-option key="4" value="4" label="新增条目"></el-option>
                                    <el-option key="5" value="5" label="添加关联条目"></el-option>
                                    <el-option key="6" value="6" label="解除关联条目"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div style="width: 98%; height: calc(100% - 100px); margin: 0 auto">
                            <el-table
                                ref="upstreamTable"
                                :key="tableKey"
                                :data="indexClauseList"
                                border
                                stripe
                                resizable
                                :resizable-config="{ minWidth: '50' }"
                                show-header-overflow="tooltip"
                                size="mini"
                                height="100%"
                                header-align="center"
                                show-overflow
                                @cell-click="handleRow"
                                :cell-style="cellStyle"
                                auto-resize
                            >
                                <el-table-column prop="clauseCode" label="序号" width="60"></el-table-column>
                                <el-table-column prop="modifyType" label="更新状态" width="130" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        {{setModifyType(scope.row.modifyType)}}
                                        <!-- {{
                                            scope.row.modifyType == 1
                                                ? '新增'
                                                : scope.row.modifyType == 2
                                                ? '修改'
                                                : scope.row.modifyType == 3
                                                ? '删除'
                                                : '--'
                                        }} -->
                                    </template>
                                </el-table-column>
                                <el-table-column prop="indexDirectoryCode" label="来源类型" width="130" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="articleCode" label="来源名称" width="130" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="versionNumber" label="版本号" width="130" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="clauseStatus" label="条款状态" width="130" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <span style="color: green" v-if="scope.row.clauseStatus == true">启用</span>
                                        <span style="color: red" v-else-if="scope.row.clauseStatus == false">停用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="clauseNo" label="条款号" width="130" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        {{ scope.row.clauseNo || '--' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="clauseText" label="条款原文" min-width="130" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        {{ scope.row.clauseText || '--' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="modifyTime" label="更新时间" width="130" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <span>{{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) || '--' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="modifyUser" label="更新人" width="130" show-overflow-tooltip></el-table-column>
                            </el-table>
                            <div class="block">
                                <risk-pagination :paging="groupPage" @page-change="pageRet"></risk-pagination>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 合规规则 -->
                <transition name="el-zoom-in-top">
                    <div class="content-bottom" v-show="isDetails">
                        <div style="display: flex">
                            <HeaderTitle>
                                <div slot="title">条款更新详情</div>
                            </HeaderTitle>
                            <i class="el-icon-close" @click="isDetails = false"></i>
                        </div>
                        <div>
                            <UpdateDetails :additionalProperties1="additionalProperties1"></UpdateDetails>
                        </div>
                    </div>
                </transition>
            </div>
        </template>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import EntryLeftModule from './entry-left-module.vue';
import HeaderTitle from './commom/header-title.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import CategoryNodeDialog from './components/category-node-dialog.vue';
import EntryRecordDialog from './components/entry-record-dialog.vue';
import UpdateDetails from './components/update-details.vue';
import { dateFormat, timeFormat } from '@/utils/tools';
import Invest from '@/common/dict/invest';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'ComplianceClause',
    components: {
        EntryLeftModule,
        HeaderTitle,
        RiskPagination,
        CategoryNodeDialog,
        EntryRecordDialog,
        UpdateDetails,
    },
})
export default class ComplianceClause extends Vue {
    Invest: any = new Invest();
    timeFormat = timeFormat;
    dateFormat = dateFormat;
    @Prop() fileSourceCategoryData; // 文件来源分类数据
    @Prop() refreshKey;
    productSourceCategoryData = []; // 产品来源分类数据
    indexClauseList = []; // 条款列表数据
    addSourceDialog: boolean = false; // 新增来源文件弹窗
    addTreatyDialog: boolean = false; // 新增合规条款弹窗
    entryRecordDialog: boolean = false; // 条目记录弹窗
    categoryNodeDialog: boolean = false; // 树节点新增、编辑
    treeNodeData = ''; // 当前选择树节点数据
    clauseCodesList = []; // 条款多选全部数据
    entryRecordItem = ''; // 条目操作记录节点
    indexItem = ''; // 指标操作行数据
    categoryNodeType = ''; // 节点新增、编辑
    clauseQueryParam = {
        // 列表查询条件
        belongFund: '',
        clauseCode: '',
        clauseNo: '',
        clauseSourceCode: '',
        clauseStatus: '',
        clauseText: '',
        clauseType: '',
        hdSupport: '',
        paging: {
            currentPage: 1,
            pageSize: 50,
        },
        passiveTransfinite: [],
        realTimeSupport: '',
        status: '',
        suitableFund: '',
        versionNumber: '',
        versionValid: '',
        modifyType: '',
        indicatorCode: '',
        articleCode: '',
        liquidation: '',
        indexDirectoryCode: '',
    };
    indexClauseRelation = {
        // 点击行
        operationLogCode: '',
        modifyEvent: '',
        clauseCode: '',
    };
    treeNode = {
        id: '0',
        indexType: '1',
        label: '监管类',
        level: '1',
        parentCode: '',
    };
    // 全部表格列
    tableColumns: any[] = [
        { content: '序号', id: 'clauseCode', sortable: false },
        { content: '更新状态', id: 'modifyType', sortable: false },
        { content: '来源类型', id: 'indexDirectoryCode', sortable: false },
        { content: '来源名称', id: 'articleCode', sortable: false },
        { content: '版本号', id: 'versionNumber', sortable: false },
        { content: '条款状态', id: 'clauseStatus', sortable: false },
        { content: '条款号', id: 'clauseNo', sortable: false },
        { content: '条款原文', id: 'clauseText', sortable: false },
        { content: '更新时间', id: 'modifyTime', sortable: false },
        { content: '更新人', id: 'modifyUser', sortable: false },
    ];
    private groupPage: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };
    timeout = null; // 防抖
    tableKey: number = 0;
    isDetails: boolean = false;
    additionalProperties1 = []; // 日志前后对比
    headerTitle = '监管类';

    created() {}
    mounted() {
        this.emitHandleNodeClickRecord(this.treeNode);
    }
    @Watch('refreshKey', { immediate: true, deep: true })
    watchFileSourceCategoryData(val) {
        let treeNode = {
            id: '0',
            indexType: '1',
            label: '监管类',
            level: '1',
            parentCode: '',
        };
        this.$nextTick(() => {
            this.emitHandleNodeClickRecord(treeNode);
        });
    }
    // 获取当前条款操作日志记录
    emitHandleNodeClickRecord(param) {
        this.treeNode = {
            id: param.id,
            indexType: param.indexType,
            label: param.label,
            level: param.level,
            parentCode: param.parentCode,
        };
        if (param.indexType == 1) {
            this.headerTitle = '监管类';
        } else if (param.indexType == 2) {
            this.headerTitle = '合同类';
        } else if (param.indexType == 3) {
            this.headerTitle = '公司制度解读类';
        }
        this.additionalProperties1 = [];
        if (['1'].includes(param.indexType) && param.level == '1') {
            this.clauseQueryParam.indicatorCode = '1';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = '';
        } else if (['2'].includes(param.indexType) && param.level == '1') {
            this.clauseQueryParam.indicatorCode = '2';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = '';
        } else if (['3'].includes(param.indexType) && param.level == '1') {
            this.clauseQueryParam.indicatorCode = '3';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = '';
        } else if (['1', '3'].includes(param.indexType) && param.level == '2') {
            this.clauseQueryParam.indicatorCode = '';
            this.clauseQueryParam.indexDirectoryCode = param.id;
            this.clauseQueryParam.articleCode = '';
        } else if (['2'].includes(param.indexType) && param.level == '2' && param.id == '3') {
            this.clauseQueryParam.indicatorCode = '3';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = '';
        } else if (['2'].includes(param.indexType) && param.level == '2' && param.id == '4') {
            this.clauseQueryParam.indicatorCode = '3';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = '';
        } else if (['1', '3'].includes(param.indexType) && param.level == '3') {
            this.clauseQueryParam.indicatorCode = '';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = param.id;
        } else if (['2'].includes(param.indexType) && param.level == '4') {
            this.clauseQueryParam.indicatorCode = '';
            this.clauseQueryParam.indexDirectoryCode = '';
            this.clauseQueryParam.articleCode = param.id;
        } else if (['2'].includes(param.indexType) && param.level == '3') {
            this.clauseQueryParam.indicatorCode = '2';
            this.clauseQueryParam.indexDirectoryCode = param.id;
        }
        this.$axios.post('/zhiguan/indexClause/getOpertionLog', this.clauseQueryParam).then((res: any) => {
            this.indexClauseList = [];
            if (res.list.length > 0) {
                res.list.forEach((item, index) => {
                    this.indexClauseList.push(item);
                });
                this.indexClauseRelation.clauseCode = res.list[0].clauseCode;
                this.handleRow(res.list[0], '', '');
                this.groupPage.total = res.total;
            } else {
                this.isDetails = false;
            }
        });
    }
    // 更新类型
    getOpertionLog() {
        this.emitHandleNodeClickRecord(this.treeNode);
    }
    // 条款原文模糊搜索
    clauseTextLikeQuery(param) {
        this.debounce(this.getOpertionLog, 500);
    }
    // 单击合规条款table行
    handleRow(row, event, column) {
        if (row.clauseCode) {
            this.indexClauseRelation.clauseCode = row.clauseCode;
            this.$axios
                .post('/zhiguan/indexClause/opertionLogDetail', {
                    clauseCode: row.clauseCode,
                })
                .then((res: any) => {
                    this.isDetails = true;
                    this.additionalProperties1 = [];
                    res.forEach((item, index) => {
                        let modifyText = JSON.parse(item.modifyText);
                        this.additionalProperties1.push({ ...item });
                        this.additionalProperties1[index].modifyText = modifyText[0].IndexClauseDetails;
                    });
                });
        }
    }
    // 分页
    private pageRet(): void {
        this.clauseQueryParam.paging.currentPage = this.groupPage.currentPage;
        this.clauseQueryParam.paging.pageSize = this.groupPage.pageSize;
        this.emitHandleNodeClickRecord(this.treeNode);
    }
    // 防抖
    debounce(fun, time = 500) {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        this.timeout = setTimeout(() => {
            fun();
        }, time);
    }
    // 条款点击行单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
        if (row.clauseCode) {
            if (row.clauseCode == this.indexClauseRelation.clauseCode) {
                return { background: '#e6f7ff' };
            }
        }
    }
    setModifyType(type) {
        console.log('hzj=操作记录类型', type)
        if (type === '1') {
            return '新增条款'
        } else if (type == '2') {
            return '修改条款'
        } else if (type == '3') {
            return '删除条款'
        } else if (type == '4') {
            return '新增条目'
        } else if (type == '5') {
            return '添加关联条目'
        } else if (type == '6') {
            return '解除关联条目'
        }
    }
}
</script>
<style lang="scss" scoped>
.entry {
    height: 100%;
    display: flex;
    .content {
        min-width: 1050px;
        overflow: auto;
        .content-top,
        .content-bottom {
            height: 50%;
        }
    }
}

.operate {
    height: calc(100% - 50px);
    .operate-btn {
        width: 98%;
        display: flex;
        justify-content: space-between;
        margin: 10px auto;
    }
}

.el-icon-close {
    font-size: 18px;
    margin-top: 12px;
    margin-right: 35px;
    color: #575757;
    font-weight: bold;
}
.el-icon-close:hover {
    color: #409eff !important;
    transform: scale(1.5) !important;
}
</style>
